<template>
  <div id="bills">
    <div class="card">
      <div class="card-header">
        <nav aria-label="breadcrumb" role="navigation">
          <ol class="breadcrumb pb-0">
            <li class="breadcrumb-item active" aria-current="page">
              账单 - 待结算
            </li>

            <li class="breadcrumb-item ms-auto">
              <router-link to="/bills">列表</router-link>
            </li>
            <li class="breadcrumb-item">
              <router-link to="/bills/unreviewed">待审核</router-link>
            </li>
            <li class="breadcrumb-item">
              <router-link to="/ent/settlements">结算单</router-link>
            </li>
            <li class="breadcrumb-item">
              <router-link to="/ent/receipts">收款单</router-link>
            </li>
          </ol>
        </nav>
      </div>
      <div class="card-body px-1">
        <form class="">
          <select class="form-select" v-model.number="billType">
            <option value="-1">所有</option>
            <option value="0">机票</option>
            <option value="5">退票</option>
            <option value="7">改签</option>
            <option value="6">服务</option>
            <option value="2">酒店</option>
            <option value="3">火车票</option>
          </select>
          <my-date-picker
            id="date0"
            v-model="beginDate"
            placeholder="账单日期从"
            sizing="sm"
          ></my-date-picker>
          <my-date-picker
            id="date1"
            v-model="endDate"
            placeholder="账单日期到"
            sizing="sm"
          ></my-date-picker>
          <my-date-picker
            id="date2"
            v-model="etdzDateBegin"
            placeholder="出票日期从"
            sizing="sm"
          ></my-date-picker>
          <my-date-picker
            id="date3"
            v-model="etdzDateEnd"
            placeholder="出票日期到"
            sizing="sm"
          ></my-date-picker>
          <my-date-picker
            id="date4"
            v-model="auditDateBegin"
            placeholder="审核日期从"
            sizing="sm"
          ></my-date-picker>
          <my-date-picker
            id="date5"
            v-model="auditDateEnd"
            placeholder="审核日期到"
            sizing="sm"
          ></my-date-picker>
          <select class="form-select" v-model.number="supplierId">
            <option value="0">所有供应商</option>
            <template v-for="info in suppliers">
              <option :value="info.id">{{ info.name }}</option>
            </template>
          </select>
          <div class="col-2 px-0">
            <my-select-customer
              :customerId.sync="customerId"
              :enterpriseType="1"
            ></my-select-customer>
          </div>
          <input
            class="form-control"
            placeholder="成本中心"
            size="7"
            v-model.trim="costCenter"
          />
          <input
            type="textfield"
            class="form-control"
            size="6"
            placeholder="订单号"
            v-model.trim="orderNo"
          />
          <input
            type="textfield"
            class="form-control"
            size="8"
            placeholder="原始单号"
            v-model.trim="flightOrderNo"
          />
          <input
            type="textfield"
            class="form-control"
            size="6"
            placeholder="账单备注"
            v-model.trim="remark"
          />
          <label>每页</label>
          <select class="form-select" v-model.number="sc.pageSize">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
            <option value="500">500</option>
            <option value="5000">5000</option>
          </select>

          <button
            type="button"
            class="btn btn-primary ms-1"
            @click.stop="searchBills()"
          >
            查找账单
          </button>
          <button
            type="button"
            class="btn btn-secondary btn-sm ms-1"
            @click.stop="reset()"
          >
            重置
          </button>
          <a
            class="btn btn-success ms-auto invisible"
            @click.stop="downloadBillInfo()"
            href="#"
            title="a"
            >下载</a
          >
          <button
            type="button"
            class="btn btn-warning btn-sm ms-auto"
            @click.stop="checkPayStatus()"
            title="检查散客订单的收款状态"
            :disabled="btnDisabled"
          >
            收款状态
          </button>
        </form>
      </div>
      <table class="table table-striped table-hover table-sm small">
        <thead>
          <tr>
            <th>账单号</th>
            <th>类型</th>
            <th>客户</th>
            <th>编号/成本/项目</th>
            <th>账单/出票日期</th>
            <th>审核日期</th>
            <th>订票员</th>
            <th>收款方式</th>
            <th class="text-end">账单金额</th>
            <th class="text-end">成本</th>
            <th class="text-end">利润</th>
            <th>备注</th>
            <th>订单号</th>
            <th>原始单号</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input type="text" size="8" v-model.trim="filter.billNum" />
            </td>
            <td></td>
            <td>
              <input type="text" size="8" v-model.trim="filter.vipName" />
            </td>
            <td>
              <input type="text" size="6" v-model.trim="filter.customerCode" />
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td class="text-end">
              <input type="text" size="6" v-model.number="filter.billSum" />
            </td>
            <td class="text-end">
              <input type="text" size="6" v-model.number="filter.cost" />
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td><button @click.stop="resetFilter()">清空</button></td>
            <td></td>
          </tr>
          <template v-for="(info, index) in filterBills">
            <tr @mouseenter.once="showBillDetail(info)">
              <td>
                <input type="checkbox" :value="info.id" v-model="reviewedIds" />
                {{ info.billNum }}
              </td>
              <td>{{ showBillTypeDesc(info.billType) }}</td>
              <td>
                <template v-if="info.customerType === 0">散客</template>
                <template v-else-if="info.customer !== null">
                  {{ info.customer.vipName }}
                </template>
              </td>
              <td>
                <template v-if="info.customer !== null">
                  {{ info.customer.customerCode }}
                </template>
                /{{ info.costCenter }}/{{ info.projectName }}
              </td>
              <td>
                {{ info.opDate }}
                <template
                  v-if="
                    info.etdzDate !== info.opDate &&
                    info.etdzDate !== null &&
                    info.etdzDate.length > 0
                  "
                >
                  /{{ info.etdzDate }}
                </template>
              </td>
              <td>{{ info.auditDate }}</td>
              <td>{{ info.op1 }}</td>
              <td>
                {{ info.payTypeNoteDesc }}
                <template v-if="info.bePaid === '0'">
                  <span class="text-danger small">未收</span>
                </template>
                <template v-else-if="info.bePaid === '1'">
                  <span class="text-success small">已收</span>
                </template>
              </td>
              <td class="text-end">{{ info.billSum }}</td>
              <td class="text-end">{{ info.cost }}</td>
              <td class="text-end">{{ info.profit }}</td>
              <td></td>
              <td>{{ info.orderNo }}</td>
              <td>{{ info.flightOrderNo }}</td>
              <td>
                <router-link
                  :to="`/bill/detail/` + info.id + `?print=1`"
                  target="_blank"
                  >详情</router-link
                >
              </td>
            </tr>
            <tr>
              <td colspan="11" class="text-center">
                <!-- 显示订单详情：主要是人名 -->
                <!-- 机票账单 -->
                <template
                  v-if="info.billType === '0' && info.tickets.length > 0"
                >
                  <table class="mb-0 ms-auto me-auto">
                    <tr v-for="detail in info.tickets">
                      <td>{{ detail.passengerName }}</td>
                      <td>{{ detail.balanceCode }}-{{ detail.ticketNo }}</td>
                    </tr>
                  </table>
                </template>
                <!-- 酒店账单 -->
                <template
                  v-else-if="
                    info.billType === '2' && info.hotelBookings.length > 0
                  "
                >
                  <table class="mb-0 ms-auto me-auto">
                    <tr v-for="detail in info.hotelBookings">
                      <td>{{ detail.passengerName }}</td>
                      <td>{{ detail.hotelName }}</td>
                    </tr>
                  </table>
                </template>
                <!-- 火车票账单 -->
                <template
                  v-else-if="
                    info.billType === '3' && info.trainTickets.length > 0
                  "
                >
                  <table class="mb-0 ms-auto me-auto">
                    <tr v-for="detail in info.trainTickets">
                      <td>{{ detail.passengerName }}</td>
                      <td>{{ detail.trainNo }}</td>
                    </tr>
                  </table>
                </template>
                <!-- 退票账单 -->
                <template
                  v-else-if="
                    info.billType === '5' && info.refundTickets.length > 0
                  "
                >
                  <table class="mb-0 ms-auto me-auto">
                    <tr v-for="detail in info.refundTickets">
                      <td>{{ detail.psgName }}</td>
                      <td>{{ detail.balanceCode }}-{{ detail.ticketNo }}</td>
                    </tr>
                  </table>
                </template>
                <!-- 服务账单 -->
                <template
                  v-else-if="info.billType === '6' && info.vasOrders.length > 0"
                >
                  <table class="mb-0 ms-auto me-auto">
                    <tr v-for="detail in info.vasOrders">
                      <td>{{ detail.productName }}</td>
                      <td>{{ detail.remark }}</td>
                    </tr>
                  </table>
                </template>
                <!-- 服务账单 -->
                <template
                  v-else-if="
                    info.billType === '7' && info.changeOrders.length > 0
                  "
                >
                  <table class="mb-0 ms-auto me-auto">
                    <tr v-for="detail in info.changeOrders">
                      <td>{{ detail.psgName }}</td>
                      <td>{{ detail.balanceCode }}-{{ detail.ticketNo }}</td>
                    </tr>
                  </table>
                </template>
              </td>
              <td colspan="5">
                {{ info.remark }}
              </td>
            </tr>
          </template>
          <tr v-if="sc.pageTotal === 1">
            <td colspan="8" class="text-end">合计：</td>
            <td class="text-end">{{ totalBillSum }}</td>
            <td class="text-end">{{ totalCost }}</td>
            <td class="text-end">{{ totalProfit }}</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td colspan="15">
              <button
                @click.stop="uncheckAll()"
                class="btn btn-sm btn-secondary ms-1"
              >
                全否
              </button>
              <button
                @click.stop="checkAll()"
                class="btn btn-sm btn-primary ms-1"
              >
                全选
              </button>
              <button
                @click.stop="checkAllShow()"
                class="btn btn-sm btn-success"
              >
                全选可见
              </button>

              <template v-if="searchedCustomerId >= 0">
                <button
                  class="btn btn-success float-end"
                  @click.stop="createSettlement()"
                >
                  新建(加入)结算单
                </button>
              </template>
              <template v-else>
                <span class="text-warning float-end"
                  >指定客户查找账单，此处会有变化</span
                >
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <nav id="pagination-box" class="float-end" v-if="sc.pageTotal > 1">
      <my-pagination
        name="pagination"
        :row-count="sc.rowCount"
        :page-total="sc.pageTotal"
        :page-no="sc.pageNo"
        @next-page="nextPage"
        @prev-page="prevPage"
        @direct-page="directPage"
      ></my-pagination>
    </nav>

    <my-modal-create-settlement ref="modalCreateSettlement">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-create-settlement>
  </div>
</template>

<script>
import { APP_FLIGHT_PATH } from "@/common/common.js";
import { searchSuppliers } from "@/api/basic-data.js";
import {
  searchBillsToSettle,
  getBillTypeDesc,
  createSettlement,
  checkPayStatus,
  searchBillDetail,
} from "@/api/bill.js";
import MyPagination from "@/components/my-pagination.vue";
import MyDatePicker from "@/components/my-datepicker.vue";
import MyModalCreateSettlement from "@/components/modal/my-modal-settlement-create.vue";
import MySelectCustomer from "@/components/my-select2-customer.vue";

export default {
  components: {
    MyDatePicker,
    MyPagination,
    MyModalCreateSettlement,
    MySelectCustomer,
  },
  data() {
    return {
      orders: [],
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 20,
        pageTotal: 0,
      },
      beginDate: "",
      endDate: "",
      etdzDateBegin: "",
      etdzDateEnd: "",
      auditDateBegin: "",
      auditDateEnd: "",
      billType: -1,
      customerId: -1,
      suppliers: [],
      supplierId: 0,
      costCenter: "",
      orderNo: "",
      flightOrderNo: "",
      remark: "",

      totalBillSum: 0,
      totalCost: 0,
      totalProfit: 0,

      reviewedIds: [],
      modalTitle: "",

      searchedCustomerId: -1,

      filter: {
        billNum: "",
        customerCode: "",
        vipName: "",
        billSum: 0,
        cost: 0,
      },

      btnDisabled: false,
    };
  },
  watch: {
    reviewedIds: function () {
      this.caclTotal();
    },
  },
  computed: {
    filterBills: function () {
      const self = this;
      return this.orders.filter(function (info) {
        return (
          (self.filter.billNum === "" ||
            info.billNum.indexOf(self.filter.billNum) >= 0) &&
          (self.filter.customerCode === "" ||
            (info.customer !== null &&
              info.customer.customerCode !== null &&
              info.customer.customerCode.indexOf(self.filter.customerCode) >=
                0)) &&
          (self.filter.billSum === 0 || self.filter.billSum === info.billSum) &&
          (self.filter.cost === 0 || self.filter.cost === info.cost) &&
          (self.filter.vipName === "" ||
            (info.customer !== null &&
              info.customer.vipName !== null &&
              info.customer.vipName.indexOf(self.filter.vipName) >= 0))
        );
      });
    },
  },
  mounted: function () {
    this.searchSuppliers();
    // this.searchBills()
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    searchBills: function () {
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.beginDate": this.beginDate,
        "sc.endDate": this.endDate,
        "sc.etdzDateBegin": this.etdzDateBegin,
        "sc.etdzDateEnd": this.etdzDateEnd,
        "sc.auditDateBegin": this.auditDateBegin,
        "sc.auditDateEnd": this.auditDateEnd,
        billType: this.billType,
        customerId: this.customerId,
        supplierId: this.supplierId,
        "sc.costCenter": this.costCenter,
        "sc.orderNo": this.orderNo,
        "sc.flightOrderNo": this.flightOrderNo,
        "sc.remark": this.remark,
      };

      this.showLoading();

      searchBillsToSettle(
        params,
        (jsonResult) => {
          this.reviewedIds.splice(0);

          this.orders = jsonResult.dataList;
          this.sc = jsonResult.page;

          this.searchedCustomerId = this.customerId;
        },
        () => {
          this.hideLoading();
        }
      );
    },
    showBillTypeDesc: function (val) {
      return getBillTypeDesc(val);
    },
    resetTotal: function () {
      this.totalBillSum = 0;
      this.totalCost = 0;
      this.totalProfit = 0;
    },
    caclTotal: function () {
      // console.log('caclTotal')
      this.resetTotal();

      for (const info of this.orders) {
        if (this.reviewedIds.indexOf(info.id) >= 0) {
          this.totalBillSum += info.billSum;
          this.totalCost += info.cost;
          this.totalProfit += info.profit;
        }
      }

      this.totalBillSum = Math.round(this.totalBillSum * 100) / 100;
      this.totalCost = Math.round(this.totalCost * 100) / 100;
      this.totalProfit = Math.round(this.totalProfit * 100) / 100;
    },
    checkAllShow: function () {
      const self = this;
      this.reviewedIds = [];
      this.filterBills.forEach(function (item) {
        self.reviewedIds.push(item.id);
      });
      this.caclTotal();
    },
    checkAll: function () {
      const self = this;
      this.reviewedIds = [];
      this.orders.forEach(function (item) {
        self.reviewedIds.push(item.id);
      });
      this.caclTotal();
    },
    uncheckAll: function () {
      this.reviewedIds = [];
      this.resetTotal();
    },
    createSettlement: function () {
      if (this.reviewedIds.length < 1) {
        this.showErrMsg("请选择账单");
        return;
      }

      this.$refs.modalCreateSettlement
        .modal(this.totalBillSum, this.searchedCustomerId)
        .then((v) => {
          createSettlement(
            {
              customerId: this.searchedCustomerId,
              settlementId: v.settlementId,
              settlementNo: v.settlementNo,
              settlementName: v.settlementName,
              total: this.totalBillSum,
              billIds: this.reviewedIds,
            },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    searchSuppliers: function () {
      if (this.suppliers.length > 0) return;
      const params = {
        "sc.pageNo": 1,
        "sc.pageSize": 500,
      };

      searchSuppliers(params, (jsonResult) => {
        this.suppliers = jsonResult.dataList;
      });
    },
    checkPayStatus: function () {
      this.btnDisabled = true;
      checkPayStatus(
        (v) => this.commonShowMessage(v),
        () => {
          this.btnDisabled = false;
        }
      );
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.searchBills();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.searchBills();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.searchBills();
    },
    commonShowMessage: function (jsonResult) {
      if (jsonResult.status !== "OK") {
        this.showErrMsg("失败：" + jsonResult.errmsg, "danger");
      } else {
        this.searchBills();
        if (jsonResult.desc !== "") {
          this.showErrMsg(jsonResult.desc);
        } else {
          this.showErrMsg("操作成功");
        }
      }
    },
    downloadBillInfo: function () {
      const params =
        "sc.pageNo=" +
        this.sc.pageNo +
        "&sc.beginDate=" +
        this.beginDate +
        "&sc.endDate=" +
        this.endDate +
        "&billType=" +
        this.billType +
        "&customerId=" +
        this.customerId +
        "&reviewed=1&bePaid=0&settled=0";
      const url = APP_FLIGHT_PATH + "/downloadBillInfo.do?" + params;
      window.open(url);
    },
    resetFilter: function () {
      this.filter.billNum = "";
      this.filter.customerCode = "";
      this.filter.vipName = "";
      this.filter.billSum = 0;
      this.filter.cost = 0;
    },
    reset: function () {
      this.sc.pageNo = 1;
      this.beginDate = "";
      this.endDate = "";
      this.etdzDateBegin = "";
      this.etdzDateEnd = "";
      this.auditDateBegin = "";
      this.auditDateEnd = "";
      this.billType = -1;
      this.supplierId = 0;
      this.customerId = -1;
      this.costCenter = "";
      this.orderNo = "";
      this.flightOrderNo = "";
    },
    showBillDetail: function (bill) {
      const params = {
        id: bill.id,
      };

      searchBillDetail(params, (v) => {
        if (v.billType === "0") {
          // 机票账单
          for (let x of v.tickets) {
            bill.tickets.push(x);
          }
        } else if (v.billType === "2") {
          // 酒店账单
          for (let x of v.hotelBookings) {
            bill.hotelBookings.push(x);
          }
        } else if (v.billType === "3") {
          // 火车票账单
          for (let x of v.trainTickets) {
            bill.trainTickets.push(x);
          }
        } else if (v.billType === "5") {
          // 退票账单
          for (let x of v.refundTickets) {
            bill.refundTickets.push(x);
          }
        } else if (v.billType === "6") {
          // 服务账单
          for (let x of v.vasOrders) {
            bill.vasOrders.push(x);
          }
        } else if (v.billType === "7") {
          // 改签账单
          for (let x of v.changeOrders) {
            bill.changeOrders.push(x);
          }
        }
      });
    },
  },
};
// 380
</script>